<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="index">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/assets/css/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 80px;
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
<div th:insert="~{common :: #header}"></div>
<div class="am-cf admin-main">
    <div th:insert="~{common ::#sidebar}"></div>
    <div class=" admin-content">
        <div class="daohang">
            <ul>
                <li>
                    <button type="button" class="am-btn am-btn-default am-radius am-btn-xs"/>
                    首页
                </li>
            </ul>
        </div>

        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-users"> 教材管理</ul>
                <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">教材管理</a></dl>
                <!--这里打开的是新页面-->
                <dl>
                    <button id="addFood" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                        手动添加教材
                    </button>
                </dl>
            </div>
            <form class="am-form am-g" >
                <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                    <thead>
                    <tr class="am-success">

                        <th class="table-author am-hide-sm-only">id</th>
                        <th class="table-author am-hide-sm-only">名称</th>
                        <th class="table-author am-hide-sm-only">状态</th>
                        <th class="table-author am-hide-sm-only">所属分类</th>
                        <th class="table-author am-hide-sm-only">库存</th>
                        <th class="table-author am-hide-sm-only">开本</th>
                        <th class="table-author am-hide-sm-only">是否套装</th>
                        <th class="table-author am-hide-sm-only">纸张</th>
                        <th class="table-author am-hide-sm-only">包装</th>
                        <th class="table-author am-hide-sm-only">作者</th>

                        <th class="table-author am-hide-sm-only">出版社</th>


                        <th class="table-date am-hide-sm-only">创建时间</th>
                        <th class="table-date am-hide-sm-only">更新时间</th>
                        <th width="130px" class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody id="userInfo">
                    <tr th:each="book:${bookVos.list}">

                        <td class="am-hide-sm-only" th:text="${book.bookId}"></td>
                        <td class="am-hide-sm-only" th:text="${book.name}"></td>
                        <td class="am-hide-sm-only" th:if="${book.status ==1 }" >在馆</td>
                        <td class="am-hide-sm-only" th:if="${book.status ==2 }" >不在馆</td>
                        <td class="am-hide-sm-only" th:text="${book.categoryName}"></td>
                        <td class="am-hide-sm-only" th:text="${book.quantity}"></td>
                        <td class="am-hide-sm-only" th:text="${book.kb}"></td>
                        <td class="am-hide-sm-only" th:if="${book.isTao ==1}"> 套装</td>
                        <td class="am-hide-sm-only" th:if="${book.isTao ==2}"> 非套装</td>
                        <td class="am-hide-sm-only" th:text="${book.zz}"></td>
                        <td class="am-hide-sm-only" th:text="${book.bz}"></td>

                        <td class="am-hide-sm-only" th:text="${book.author}"></td>
                        <td class="am-hide-sm-only" th:text="${book.cbs}"></td>

                        <td class="am-hide-sm-only" th:text="${#dates.format(book.createTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td class="am-hide-sm-only" th:text="${#dates.format(book.updateTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <div class="am-btn am-btn-default am-btn-xs am-text-success am-round">
                                        <span id="nouse" class="am-icon-search" title="没有用，就是为了好看加上的"></span>
                                    </div>



                                    <input type="hidden" id="bookId" th:value="${book.bookId}">
                                    <input type="hidden" id="bookName" th:value="${book.name}">
                                    <input type="hidden" id="bookStatus" th:value="${book.status}">
                                    <input type="hidden" id="categoryId" th:value="${book.categoryId}">
                                    <input type="hidden" id="bookQuantity" th:value="${book.quantity}">
                                    <input type="hidden" id="bookKb" th:value="${book.kb}">
                                    <input type="hidden" id="bookIsTao" th:value="${book.isTao}">
                                    <input type="hidden" id="bookZz" th:value="${book.zz}">
                                    <input type="hidden" id="bookBz" th:value="${book.bz}">
                                    <input type="hidden" id="bookAuthor" th:value="${book.author}">
                                    <input type="hidden" id="bookCbs" th:value="${book.cbs}">
                                    <input type="hidden" id="bookDetail" th:value="${book.content}">
                                    <input type="hidden" id="bookImgUrl" th:value="${book.imgUrl}">




                                    <div id="editInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
                                         title="修改信息">
                                        <span id="editor" class="am-icon-pencil-square-o"></span>
                                    </div>
                                    <div id="deleteInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-danger am-round" title="删除信息">
                                        <span id="delete" class="am-icon-trash-o"></span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <ul class="am-pagination am-fr">
                    <li><a href="">«</a></li>
                    <li><a href=""></a></li>
                    <li><a href="">»</a></li>
                </ul>
                <div class="am-btn-group am-btn-group-xs"></div>
                <hr/>
                <p>注：.....</p>
            </form>

            <div class="foods">
                <dl>
                    <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
                </dl>
            </div>
        </div>
    </div>
</div>


<!--添加食材信息-->
<div>
    <div id="editUserInfo" class="bg-model waaibiankuang">



        <form id="foodForm">
            <div class='content neibiankuang' style="width: 650px;">
                <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">添加教材信息</h4>
                </div>
                <input type="hidden" name="id" id="editBookId">
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">教材名称：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：董卿"
                           id="editBookName" name="name">
                </div>


                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">所属类别：</label>
                    <select id="editCategory" style="height: 40px;font-size: 14px;  border-radius: 3px;  width: 170px;"
                            name="categoryId">
                        <option th:each="category:${categories}" th:text="${category.categoryName}"
                                th:value="${category.id}"></option>
                    </select>
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">教材图片：</label>
                    <input type="hidden" name="imgUrl" id="imgUrl">
                    <input type="file" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" id="editImage" name="imgUrl">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">库存量：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：100"
                           id="editBookQuantity" name="quantity">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">出版社：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：百花洲文艺出版社"
                           id="editCbs" name="cbs">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">开本：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：16开"
                           id="editKb" name="kb">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">用纸：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：轻型纸"
                           id="editZz" name="zz">
                </div>
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">包装：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：简包装"
                           id="editBz" name="bz">
                </div>
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">作者：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：王雪娇"
                           id="editBookAuthor" name="author">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">教材状态：</label>
                    <select name="status" style="height: 40px;font-size: 14px;  border-radius: 3px; width: 170px;"
                            id="editBookStatus">
                        <option value="1">在馆</option>
                        <option value="2">非在馆</option>
                    </select>
                </div>
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">是否套装：</label>
                    <select name="isTao" style="height: 40px;font-size: 14px;  border-radius: 3px; width: 170px;"
                            id="editIsTao">
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select>
                </div>

                <div style="margin: 10px;float: left;">
                    <label class="edit_name">详细介绍：</label>
                    <textarea type="text" style="font-size: 14px;width: 480px;  height: 60px;"
                           class="edit_input" placeholder="例如：这里填写的是详细介绍"
                              id="editBookDetail" name="content"></textarea>
                </div>
                <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <button type="button" id="editUserInfoSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">
                        修改
                    </button>
                    <button type="button" class="edit_btn edit_btn_close" id="editUserInfoClose">关闭</button>
                </div>
                　　
            </div>
        </form>
    </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/polyfill/rem.min.js"></script>
<script src="/assets/js/polyfill/respond.min.js"></script>
<script src="/assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/amazeui.js"></script>
<!--<![endif]-->


<script type="application/javascript">

    $(document).ready(function () {
        // 获取到事件
        $("#userInfo").on('click', 'span[id^="nouse"]', function () {
            alert("点下其他的试试^_^");
        });
        // 获取到修改事件
        $("#userInfo").on('click', '#editInformation', function () {
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});

            var bookId = $(this).prevAll("#bookId").val();
            var bookName = $(this).prevAll("#bookName").val();
            var bookStatus = $(this).prevAll("#bookStatus").val();
            var categoryId = $(this).prevAll("#categoryId").val();
            var bookQuantity = $(this).prevAll("#bookQuantity").val();
            var bookKb = $(this).prevAll("#bookKb").val();
            var bookIsTao = $(this).prevAll("#bookIsTao").val();
            var bookZz = $(this).prevAll("#bookZz").val();
            var bookBz = $(this).prevAll("#bookBz").val();
            var bookAuthor = $(this).prevAll("#bookAuthor").val();
            var bookCbs = $(this).prevAll("#bookCbs").val();
            var bookDetail = $(this).prevAll("#bookDetail").val();
            var bookImgUrl = $(this).prevAll("#bookImgUrl").val();


            $("#editBookId").val(bookId);
            $("#editBookName").val(bookName);
            $("#editCategory").val(categoryId);
            $("#imgUrl").val(bookImgUrl);
            $("#editBookQuantity").val(bookQuantity);
            $("#editCbs").val(bookCbs);
            $("#editKb").val(bookKb);
            $("#editZz").val(bookZz);
            $("#editBz").val(bookBz);
            $("#editBookAuthor").val(bookAuthor);
            $("#editBookStatus").val(bookStatus);
            $("#editIsTao").val(bookIsTao);
            $("#editBookDetail").val(bookDetail);

        });
        // 修改事件关闭模态框
        $("#editUserInfoClose").click(function () {
            $("#editUserInfo").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        });
        // 提交修改信息
        $("#editUserInfoSubmit").click(function () {
            $.ajax({
                url: '/book/updateBook',
                dateType: 'JSON',
                type: 'POST',
                data: $("#foodForm").serialize(),
                success: function (result) {
                    console.log(result  )
                    if (result.code != 200) {
                        alert("更新失败！");
                        return false;
                    } else {
                        window.location.reload();
                    }
                }
            })
        });
        // 获取到删除事件
        $("#userInfo").on('click', '#deleteInformation', function () {
            if (!confirm("确定删除？")) {
                return false;
            }
            var userId = $(this).prevAll("#userId").val();
            $.ajax({
                url: '/user/deleteById?userId=' + userId,
                success: function (result) {
                    if (result.code == 200) {
                        window.location.reload();
                    } else {
                        alert("删除失败！");
                        return;
                    }
                }
            })
        });

        // 添加教材
        $("#addFood").click(function () {

            $("#editBookId").val("");
            $("#editBookName").val("");
            $("#editCategory").val("");
            $("#imgUrl").val("");
            $("#editBookQuantity").val("");
            $("#editCbs").val("");
            $("#editKb").val("");
            $("#editZz").val("");
            $("#editBz").val("");
            $("#editBookAuthor").val("");
            $("#editBookStatus").val("");
            $("#editIsTao").val("");
            $("#editBookDetail").val("");
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
        })

        // 上传图片
        $("#editImage").change(function () {
            var editImage = $("#editImage").get(0).files[0];
            console.log(editImage);
            var formDate = new FormData();
            formDate.append("editImage", editImage);
            $.ajax({
                url: '/file/upload',
                type: 'POST',
                processData: false,
                contentType: false,
                async: false,
                data: formDate,
                success: function (result) {
                    if (result.code == 200) {
                        $("#imgUrl").val("");
                        $("#imgUrl").val(result.data);
                    } else {
                        alert("上传失败");
                    }
                }

            })
        })

    });


</script>


</body>
</html>